@implements IAsyncDisposable
@using BootBlazor.Im.Components.Messages
@using BootBlazor.Servers.Auth
@using BootBlazor.Servers.Chat
@using BootBlazor.Servers.Helper
@using BootBlazor.Servers.Data
@using BootBlazor.Servers.Services
<MudDialog>
    <DialogContent>
        <div id="chat-title" class="px-4">
            <MudText Typo="Typo.h5">
                @_loc["ChatTitle"]
            </MudText>
        </div>
        <MudDivider Class="flex-none my-2"></MudDivider>
        <div id="chat-area" class="d-flex">
            <div id="channel-list" class="d-flex flex-column">
                <div class="flex-none d-flex justify-center align-center px-6">
                    <MudTextField T="string" Class="flex-none" Value="_textValue" Variant="Variant.Outlined" Margin="Margin.Dense"
                                  Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" Label="搜索"
                                  ValueChanged="SearchedTextChanged" Immediate="true"></MudTextField>
                    <div class="flex-none ml-2">
                        <MudIconButton Icon="@Icons.Material.Filled.Add" Variant="Variant.Outlined"
                                       Size="Size.Medium" OnClick="SelectUserToChat"></MudIconButton>
                    </div>
                </div>
                <MudDivider Class="flex-none my-2"></MudDivider>
                <div class="flex-1" style="overflow:auto">
                    <MudList SelectedValue="SelectedItem" SelectedValueChanged="SelectedItemChanged"
                             T="ItemModel" ReadOnly="false" Padding="false">
                        <Virtualize Items="@ItemModelList" Context="context">
                            <MudListItem Value="@context" Dense="true" @key="@("" + context.Id + context.IsPrivate)">
                                <div class="d-flex align-center">
                                    @if (string.IsNullOrEmpty(context.Avatar))
                                    {
                                        <MudAvatar Size="Size.Medium" Color="Color.Primary">
                                            @context.Name?.First()
                                        </MudAvatar>
                                    }
                                    else
                                    {
                                        <MudAvatar Size="Size.Medium">
                                            <MudImage Src="@("Avatars/" + context.Avatar)"></MudImage>
                                        </MudAvatar>
                                    }
                                    <div class="mx-2">
                                        <MudText Typo="Typo.body1">
                                            @context.Name
                                        </MudText>
                                        @*                                         @if (context.UserList.Count > 2)
                                        {
                                        <MudText Typo="Typo.caption">
                                        @(context.UserList.First().RealName)等@(context.UserList.Count)个用户
                                        </MudText>
                                        } *@
                                    </div>
                                    <MudSpacer />
                                    @if (context.NotReadedCount > 0)
                                    {
                                        <MudChip Color="Color.Error" Size="Size.Small">@context.NotReadedCount</MudChip>
                                    }
                                </div>
                            </MudListItem>
                        </Virtualize>
                    </MudList>
                </div>
            </div>
            <MudDivider Vertical="true" FlexItem="true" />
            <div id="message-list" class="d-flex flex-column">
                <div id="message-area" class="flex-1">
                    <Virtualize Items="@MessageModels" Context="context">
                        <div @key="context.MessageId">
                            @if (context.IsCurrentUserSend)
                            {
                                <SelfMessage Avatar="@(SelectedChatUsers.First(u=>u.UserId == context.SenderId)?.Avatar)"
                                             RealName="@(SelectedChatUsers.First(u=>u.UserId == context.SenderId)?.RealName)"
                                             Message="@context.Content" SendTime="@context.CreatedTime"></SelfMessage>
                            }
                            else
                            {
                                <OtherMessage Avatar="@(SelectedChatUsers.First(u=>u.UserId == context.SenderId)?.Avatar)"
                                              RealName="@(SelectedChatUsers.First(u=>u.UserId == context.SenderId)?.RealName)"
                                              Message="@context.Content" SendTime="@context.CreatedTime"></OtherMessage>
                            }

                        </div>
                    </Virtualize>
                </div>
                <MudDivider Class="flex-none my-2"></MudDivider>
                <div id="send-area" class="flex-none d-flex justify-center align-center px-2">
                    <MudTextField Class="flex-1" @bind-Value="_messageValue" Variant="Variant.Outlined"
                                  Label="@_loc["ChatMessageSendLabel"]" Margin="Margin.Dense"></MudTextField>
                    <div class="flex-none ml-2">
                        <MudIconButton Icon="@Icons.Material.Filled.Send" Variant="Variant.Outlined"
                                       Size="Size.Medium" OnClick="SendMessage"></MudIconButton>
                    </div>
                </div>
            </div>
        </div>
    </DialogContent>
</MudDialog>
